import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './Coupon.css'
import { Button } from 'antd-mobile'

export default function Coupon() {
    const navigate = useNavigate()
    const [coupon, setCoupon] = useState([
        { id: 1, name: '满100减10', price: 10, condition: 100, time: '2023-10-01' },
        { id: 2, name: '满200减20', price: 20, condition: 200, time: '2023-10-01' },
        { id: 3, name: '满300减30', price: 30, condition: 300, time: '2023-10-01' },
    ])
    return (
        <div className='coupon'>
            <div className='coupon-header'>
                <h1>优惠券</h1>
                <span onClick={() => { navigate(-1) }}>&lt;</span>
            </div>
            <div className="coupon-content">
                {
                    coupon.map(item => {
                        return (
                            <div className='coupon-item' key={item.id}>
                                <div className='coupon-item-left'>
                                    <h3>{item.name}</h3>
                                    <p>满{item.condition}减{item.price}</p>
                                </div>
                                <div className='coupon-item-right'>
                                    <p>有效期至{item.time}</p>
                                    <Button>立即使用</Button>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}
